import React from "react";
import "./index.scss";
const imageFront = require("@/images/idcard/card_front.png");
const imageBack = require("@/images/idcard/card_back.png");
const imageAdd = require("@/images/idcard/icon-card_add.png");
const imageSuccess = require("@/images/idcard/icon-card_add_ed.png");
const imgMaps = {
	2: {
		url: imageFront,
		text: "上传人像面"
	},
	4: {
		url: imageBack,
		text: "上传国徽面"
	}
};
const Card = props => {
	const { type = "4", url, disabled, onClick, cardImg } = props;
	const handleClick = () => {
		if (onClick) {
			onClick(type);
		}
	};
	return (
		<div
			className="card-component-wrapper"
			onClick={disabled ? null : handleClick}
		>
			<div className="card-component-wrapper-image">
				<img src={cardImg[type] || imgMaps[type].url} />
				<div className="card-component-wrapper-image-position">
					<img src={url ? imageSuccess : imageAdd} />
				</div>
			</div>
			<div className="card-component-wrapper-text">{imgMaps[type].text}</div>
		</div>
	);
};

export default Card;
